<template>
  <van-nav-bar
    title="修改登录密码"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <div style="text-align: center">
    <van-icon class="icon" name="manager-o" size="24px" />
  </div>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <div>
        <van-cell-group inset>
          <van-field
            v-model="sms"
            center
            clearable
            placeholder="请输入短信验证码"
          >
            <template #button>
              <van-button
                @click="editfor"
                size="small"
                type="primary"
                :disabled="disabled"
                >{{ text }}</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="新密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px 0">
      <van-button
        round
        @click="forget"
        block
        type="primary"
        native-type="submit"
      >
        提交
      </van-button>
    </div>
  </van-form>
</template>
<script setup>
import { ref } from "vue";
import axios from "axios";
import { showToast } from "vant";
import { editforget } from "@/api/user.js";

const username = ref("");
const password = ref("");
const sms = ref("");
let num = 5;
let disabled = ref(false);
let text = ref("发送验证码");
let time = null;
const onClickLeft = () => history.back();

function editfor() {
  disabled.value = true;
  text.value = "正在发送...";
  editforget({
    checkUserExist: "!exists",
    type: "reset-pwd",
    mobile: username.value,
  }).then((res) => {
    console.log(res);
    if (res.data.code == 0) {
      showToast({
        message: res.data.msg,
        icon: "success",
      });
    } else {
      showToast({
        message: res.data.msg,
        icon: "cross",
      });
      time = setInterval(() => {
        num--;
        text.value = num + "秒";
        if (num <= 0) {
          clearInterval(time);
          num = 5;
          text.value = "再次获取";
          disabled.value = false;
        }
      }, 1000);
    }
  });
}

function forget() {
  axios({
    url: "https://fc-mp-827be4c1-176f-4e1f-985a-621b4417eadf.next.bspapp.com/api/user/pub/resetPasswordByMobile",
    method: "POST",
    data: {
      mobile: username.value,
      code: sms.value,
      password: password.value,
    },
  }).then((res) => {
    console.log(res);
    if (res.data.code == 0) {
      showToast({
        message: res.data.msg,
        icon: "success",
      });
    } else {
      showToast({
        message: res.data.msg,
        icon: "cross",
      });
    }
  });
  console.log(username.value);
}
</script>
<style>
.icon {
  padding: 40px;
  background-color: #dddddd;
  border-radius: 50%;
  margin-top: 20px;
  margin-bottom: 50px;
}
.log-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.log-top div:nth-child(2) {
  margin-left: 30px;
}
.van-cell-group--inset {
  margin: 0;
}
</style>
